<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}CursorRules{% endblock %}</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义CSS -->
    <style>
        :root {
            --primary-color: #536DFE;
            --primary-color-light: #8C9EFF;
            --primary-color-dark: #3D5AFE;
            --secondary-color: #FFD600;
            --secondary-color-light: #FFFF52;
            --secondary-color-dark: #C7A500;
            --success-color: #66BB6A;
            --danger-color: #F44336;
            --warning-color: #FFA726;
            --info-color: #29B6F6;
            
            --bg-light: #f5f7fa;
            --bg-dark: #161b22;
            --text-light: #24292f;
            --text-dark: #e6edf3;
            --card-bg-light: #ffffff;
            --card-bg-dark: #21262d;
            --border-light: #e1e4e8;
            --border-dark: #30363d;
            
            --header-light: #6E85FE;
            --header-dark: #384CDC;
            --footer-light: #4A5ED8;
            --footer-dark: #3045B5;
        }
        
        [data-bs-theme="light"] {
            --bg-color: var(--bg-light);
            --text-color: var(--text-light);
            --card-bg: var(--card-bg-light);
            --border-color: var(--border-light);
            --header-color: var(--header-light);
            --footer-color: var(--footer-light);
        }
        
        [data-bs-theme="dark"] {
            --bg-color: var(--bg-dark);
            --text-color: var(--text-dark);
            --card-bg: var(--card-bg-dark);
            --border-color: var(--border-dark);
            --header-color: var(--header-dark);
            --footer-color: var(--footer-dark);
        }
        
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            transition: background-color 0.3s ease;
        }
        
        .navbar-custom {
            background-color: var(--header-color);
            transition: background-color 0.3s ease;
        }
        
        /* 自定义页面内容样式 */
        main {
            min-height: calc(100vh - 350px);
        }
        
        /* 卡片样式 */
        .card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 表单控件样式 */
        .form-control, .btn {
            border-radius: 5px;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(83, 109, 254, 0.25);
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: var(--primary-color-dark);
            border-color: var(--primary-color-dark);
        }
        
        /* 标签样式 */
        .badge {
            border-radius: 20px;
            padding: 5px 10px;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        
        pre {
            background-color: var(--card-bg);
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            border: 1px solid var(--border-color);
        }
        
        .card {
            background-color: var(--card-bg);
            border-color: var(--border-color);
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: var(--primary-color-dark);
            border-color: var(--primary-color-dark);
        }
        
        .btn-success {
            background-color: var(--success-color);
            border-color: var(--success-color);
        }
        
        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .bg-primary {
            background-color: var(--primary-color) !important;
        }
        
        .bg-secondary {
            background-color: var(--secondary-color) !important;
            color: var(--text-light) !important;
        }
        
        .bg-success {
            background-color: var(--success-color) !important;
        }
        
        .footer-custom {
            background-color: var(--footer-color);
            color: white;
            transition: background-color 0.3s ease;
        }
        
        .theme-switch {
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            margin-left: 10px;
        }
        
        /* 全局广告样式 */
        .ad-container {
            margin-bottom: 1rem;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .ad-container:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .ad-item {
            position: relative;
            display: block;
            width: 100%;
            text-decoration: none;
            color: inherit;
        }
        
        .ad-image-wrapper {
            position: relative;
            width: 100%;
            padding-top: 50%; /* 2:1 宽高比 */
            overflow: hidden;
        }
        
        .ad-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持图片比例并填充容器 */
            transition: transform 0.3s ease;
        }
        
        .ad-container:hover .ad-item img {
            transform: scale(1.05);
        }
        
        .ad-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 0.7rem;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 2px 5px;
            border-radius: 3px;
            z-index: 2;
        }
        
        .ad-title {
            padding: 8px 10px;
            font-size: 0.9rem;
            font-weight: 600;
            background-color: rgba(245, 245, 245, 0.9);
            border-top: 1px solid #eee;
            transition: background-color 0.3s;
        }
        
        [data-bs-theme="dark"] .ad-title {
            background-color: rgba(40, 40, 40, 0.9);
            border-top-color: #444;
            color: #e6edf3;
        }
        
        .ad-desc-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            font-size: 0.85rem;
            opacity: 0;
            transform: translateY(100%);
            transition: opacity 0.3s, transform 0.3s;
            z-index: 2;
            max-height: 80%;
            overflow-y: auto;
        }
        
        .ad-desc-overlay img {
            max-width: 100%;
            height: auto;
            position: relative;
            top: 0;
            left: 0;
            transform: none;
            transition: none;
            margin: 5px 0;
        }
        
        .ad-desc-overlay p {
            margin-bottom: 0.5rem;
        }
        
        .ad-container:hover .ad-desc-overlay {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 网站统计样式 */
        .site-stats {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 1rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            margin: 0.5rem 1rem;
            color: #6c757d;
        }
        
        .stat-item i {
            margin-right: 0.5rem;
            font-size: 1.2rem;
        }
        
        .stat-label {
            margin-right: 0.3rem;
        }
        
        .stat-value {
            font-weight: bold;
        }
        
        /* 回到顶部按钮样式 */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
            transform: translateY(20px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }
        
        .back-to-top.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .back-to-top:hover {
            background-color: var(--primary-color-dark);
            transform: translateY(-5px);
        }
        
        /* 全局样式 */
        .content-card {
            margin-bottom: 1rem;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .content-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .content-item {
            position: relative;
            display: block;
            width: 100%;
            text-decoration: none;
            color: inherit;
        }
        
        .banner-image-wrapper {
            position: relative;
            width: 100%;
            padding-top: 50%; /* 2:1 宽高比 */
            overflow: hidden;
        }
        
        .content-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持图片比例并填充容器 */
            transition: transform 0.3s ease;
        }
        
        .content-card:hover .content-item img {
            transform: scale(1.05);
        }
        
        .content-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 0.7rem;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 2px 5px;
            border-radius: 3px;
            z-index: 2;
        }
        
        .content-title {
            padding: 8px 10px;
            font-size: 0.9rem;
            font-weight: 600;
            background-color: rgba(245, 245, 245, 0.9);
            border-top: 1px solid #eee;
            transition: background-color 0.3s;
        }
        
        [data-bs-theme="dark"] .content-title {
            background-color: rgba(40, 40, 40, 0.9);
            border-top-color: #444;
            color: #e6edf3;
        }
        
        .content-desc-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            font-size: 0.85rem;
            opacity: 0;
            transform: translateY(100%);
            transition: opacity 0.3s, transform 0.3s;
            z-index: 2;
            max-height: 80%;
            overflow-y: auto;
        }
        
        .content-desc-overlay img {
            max-width: 100%;
            height: auto;
            position: relative;
            top: 0;
            left: 0;
            transform: none;
            transition: none;
            margin: 5px 0;
        }
        
        .content-desc-overlay p {
            margin-bottom: 0.5rem;
        }
        
        .content-card:hover .content-desc-overlay {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
        <div class="container">
            <a class="navbar-brand" href="{% url 'core:home' %}">
                {% if site_info.logo %}
                    <img src="{{ site_info.logo.url }}" alt="{{ site_info.site_name }}" height="30" class="me-2">
                {% endif %}
                {{ site_info.site_name }}
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link {% if request.path == '/' %}active{% endif %}" href="{% url 'core:home' %}">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if '/articles/' in request.path %}active{% endif %}" href="{% url 'articles:list' %}">文章</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if '/rules/submit/' in request.path %}active{% endif %}" href="{% url 'rules:submit' %}">提交规则</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if '/about/' in request.path %}active{% endif %}" href="{% url 'core:about' %}">关于</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <!-- 深色模式开关 -->
                    <li class="nav-item">
                        <div class="theme-switch">
                            <i class="fas fa-sun me-2" id="theme-icon"></i>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="theme-toggle">
                            </div>
                        </div>
                    </li>
                    
                    {% if user.is_authenticated %}
                        {% if user.is_staff %}
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'admin:index' %}">管理后台</a>
                            </li>
                        {% endif %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                                {{ user.username }}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="{% url 'accounts:profile' %}">个人资料</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <form id="logout-form" method="post" action="{% url 'logout' %}" class="d-inline">
                                        {% csrf_token %}
                                        <button type="submit" class="dropdown-item">退出登录</button>
                                    </form>
                                </li>
                            </ul>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'login' %}">登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'accounts:signup' %}">注册</a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- 展示区域 -->
    {% if ads and ads|length > 0 %}
    <div class="container my-3">
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">
            {% for ad in ads %}
                <div class="col">
                    <div class="content-card">
                        <span class="content-badge">推荐</span>
                        <a href="{% url 'core:ad_click' ad.id %}" target="_blank" class="content-item">
                            <div class="banner-image-wrapper">
                                {% if ad.image %}
                                <img src="/media/{{ ad.image.name|cut:'ads/'|default:ad.image.name }}" alt="{{ ad.title }}" 
                                     onerror="this.onerror=null; console.log('图片加载失败: {{ ad.image.name }}'); this.src='/media/banners/default-banner.jpg';">
                                {% else %}
                                <img src="/media/banners/default-banner.jpg" alt="{{ ad.title }}">
                                {% endif %}
                                {% if ad.description %}
                                <div class="content-desc-overlay">
                                    {{ ad.description|safe }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="content-title">{{ ad.title }}</div>
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- 内容区域 -->
    <main class="py-4">
        <div class="container">
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            {% endif %}
            
            {% block content %}{% endblock %}
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer-custom py-4 mt-4">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h5>{{ site_info.site_name }}</h5>
                    <p>{{ site_info.site_description }}</p>
                    
                    <!-- 网站统计信息 -->
                    {% if site_visits or rules_count or users_count %}
                    <div class="site-stats">
                        {% if site_visits %}
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-eye"></i>
                            </div>
                            <div>
                                <div class="stat-label">访问量</div>
                                <div class="stat-value">{{ site_visits }}</div>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if rules_count %}
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div>
                                <div class="stat-label">规则数</div>
                                <div class="stat-value">{{ rules_count }}</div>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if users_count %}
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div>
                                <div class="stat-label">用户数</div>
                                <div class="stat-value">{{ users_count }}</div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
                <div class="col-md-4">
                    <h5>链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="{% url 'core:home' %}" class="text-white">主页</a></li>
                        <li><a href="{% url 'articles:list' %}" class="text-white">文章</a></li>
                        <li><a href="{% url 'rules:submit' %}" class="text-white">提交规则</a></li>
                        <li><a href="{% url 'core:about' %}" class="text-white">关于</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>联系我们</h5>
                    {% if site_info.contact_email %}
                        <p><i class="fas fa-envelope me-2"></i>{{ site_info.contact_email }}</p>
                    {% endif %}
                </div>
            </div>
            <hr class="border-light">
            <div class="text-center">
                <p>&copy; {% now "Y" %} {{ site_info.site_name }}. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <div class="back-to-top" id="backToTop">
        <i class="fas fa-arrow-up"></i>
    </div>

    <!-- Bootstrap JS & 依赖 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 深色模式切换JS -->
    <script>
        $(document).ready(function() {
            const themeToggle = $('#theme-toggle');
            const themeIcon = $('#theme-icon');
            
            // 检查本地存储的主题首选项
            const savedTheme = localStorage.getItem('theme');
            if (savedTheme === 'dark') {
                document.documentElement.setAttribute('data-bs-theme', 'dark');
                themeToggle.prop('checked', true);
                themeIcon.removeClass('fa-sun').addClass('fa-moon');
            }
            
            // 切换主题
            themeToggle.change(function() {
                if (this.checked) {
                    document.documentElement.setAttribute('data-bs-theme', 'dark');
                    localStorage.setItem('theme', 'dark');
                    themeIcon.removeClass('fa-sun').addClass('fa-moon');
                } else {
                    document.documentElement.setAttribute('data-bs-theme', 'light');
                    localStorage.setItem('theme', 'light');
                    themeIcon.removeClass('fa-moon').addClass('fa-sun');
                }
            });
        });
    </script>
    
    {% block extra_js %}{% endblock %}
    
    <!-- 回到顶部按钮脚本 -->
    <script>
        // 回到顶部功能
        $(document).ready(function() {
            const backToTopBtn = $('#backToTop');
            
            // 滚动监听，控制按钮显示/隐藏
            $(window).scroll(function() {
                if ($(this).scrollTop() > 300) {
                    backToTopBtn.addClass('show');
                } else {
                    backToTopBtn.removeClass('show');
                }
            });
            
            // 点击按钮回到顶部
            backToTopBtn.click(function() {
                $('html, body').animate({scrollTop: 0}, 500);
                return false;
            });
        });
    </script>
</body>
</html> 